<template>
  <div class="systemSystem">
    <div class="filter-container">
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-circle-plus-outline"
        @click="handleCreate"
      >
        新增
      </el-button>
    </div>
    <el-scrollbar>
      <el-table
        v-loading="listLoading"
        :data="list"
        stripe
        fit
        highlight-current-row
        style="width: 100%;margin-bottom: 20px;"
      >
        <el-table-column label="ID" min-width="80px" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.id || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="系统名称" width="180px" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.name || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="域名" width="280px" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.domain || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="URI前缀" width="180px" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.uri_prefix || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" min-width="120px" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.remark || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="{ row }">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="bottom"
            >
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                circle
                @click="handleUpdate(row)"
              >
              </el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="bottom"
            >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                circle
                @click="handleDelete(row)"
              >
              </el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="查看详情"
              placement="bottom"
            >
              <el-button
                type="success"
                size="mini"
                icon="el-icon-view"
                circle
                @click="handleDetail(row.id)"
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <el-dialog
      :modal-append-to-body="false"
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="600px"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model.sync="tempData"
        label-position="right"
        label-width="100px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="系统名称" prop="name">
          <el-input v-model="tempData.name" placeholder="系统名称" />
        </el-form-item>
        <el-form-item label="域名" prop="domain">
          <el-input
            v-model="tempData.domain"
            placeholder="请填写系统所在域名"
          />
        </el-form-item>
        <el-form-item label="URI前缀" prop="uri_prefix">
          <el-input
            v-model="tempData.uri_prefix"
            placeholder="URI前缀，用于请求转发"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="tempData.remark" placeholder="备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ '取消' }}
        </el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
        >
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { Message, MessageBox } from 'element-ui'
import {
  systemGetSystemList,
  systemCreateSystem,
  systemModifySystem,
  systemDeleteSystem
} from '@/api/system/system'
import { parseTimeJS as parseTime } from '@/utils'
import { Form } from 'element-ui'
import { cloneDeep } from 'lodash'
import { isValidURL } from '@/utils/validate'
interface IData {
  id?: number | string
  name: string
  domain: string
  uri_prefix: string
  remark: string
}
const defaultData: IData = {
  name: '',
  domain: '',
  uri_prefix: '',
  remark: ''
}
@Component({
  name: 'systemSystem',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  private tempData = cloneDeep(defaultData)
  private validateName = (rule: any, value: string, callback: Function) => {
    if (value.length < 1) {
      callback(new Error('请输入系统名称'))
    } else {
      callback()
    }
  }
  private validateDomain = (rule: any, value: string, callback: Function) => {
    if (!isValidURL(value)) {
      callback(new Error('请输入正确的域名'))
    } else {
      callback()
    }
  }
  @Prop({ default: '' }) private propExp1!: string
  // @Prop({ required: true }) private propExp2?: boolean
  private dataExp: any = ''

  // 弹窗配置
  private dialogStatus = ''
  private dialogFormVisible = false
  private textMap = {
    update: '编辑',
    create: '新增'
  }
  private rules = {
    name: [{ required: true, message: '请填写系统名称', trigger: 'blur' }],
    domain: [
      { required: true, validator: this.validateDomain, trigger: 'blur' }
    ],
    uri_prefix: [{ required: true, message: '请填写URI前缀', trigger: 'blur' }]
  }
  get computedExp() {
    //computed 属性
    return true
  }
  created() {
    // 最早可以调用vue组件method的钩子
    this.getList()
  }
  mounted() {
    //mounted 钩子
  }
  private methodExp() {
    // method创建地方
  }
  // 表loading状态
  private listLoading: boolean = false
  private list = []
  private total = 0

  // 跳转页码查询
  handleCurrentChange(val: any) {
    this.getList()
  }
  // size切换查询
  private handleSizeChange(val: any) {
    this.getList()
  }
  private async getList() {
    this.listLoading = true
    // ajax 请求相应list
    const { data } = await systemGetSystemList()
    this.list = data.list
    this.listLoading = false
  }
  //下载
  private handleDownload() {}
  // 新增
  private handleCreate() {
    this.resetData()
    this.dialogStatus = 'create'
    this.dialogFormVisible = true
    this.$nextTick(() => {
      ;(this.$refs['dataForm'] as Form).clearValidate()
    })
  }
  private resetData() {
    this.tempData = cloneDeep(defaultData)
  }
  // 新增
  private createData() {
    ;(this.$refs['dataForm'] as Form).validate(async valid => {
      if (valid) {
        const { data } = await systemCreateSystem(this.tempData)
        this.dialogFormVisible = false
        this.$notify({
          title: '成功',
          message: '创建成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      }
    })
  }
  // 更新
  private updateData() {
    ;(this.$refs['dataForm'] as Form).validate(async valid => {
      if (valid) {
        const { data } = await systemModifySystem(this.tempData)
        this.dialogFormVisible = false
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      }
    })
  }
  // 打开弹窗编辑
  private async handleUpdate(row: any) {
    this.tempData = cloneDeep(row)
    this.dialogStatus = 'update'
    this.dialogFormVisible = true
    this.$nextTick(() => {
      ;(this.$refs['dataForm'] as Form).clearValidate()
    })
  }
  // 删除操作
  private async handleDelete(row: any) {
    this.tempData = cloneDeep(row)
    MessageBox.confirm(`确定删除${row.name}子系统？`, '确定', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const { data } = await systemDeleteSystem({ id: this.tempData.id })
      this.dialogFormVisible = false
      this.$notify({
        title: '成功',
        message: '删除成功',
        type: 'success',
        duration: 2000
      })
      this.getList()
    })
  }
  // 查看子系统详情
  private handleDetail(id: string) {
    this.$router.push({
      path: '/system/system/detail?id=' + id
    })
  }
}
</script>

<style lang="scss" scoped>
.systemSystem {
  padding: 20px;
}
</style>
